<template>
  <div class="login-container">
    <div class="login-form">
      <h2 style="text-align: center; margin-bottom: 30px; color: #333;">
        kCloud 用户登录
      </h2>
      
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            id="username"
            v-model="form.username"
            type="text"
            placeholder="请输入用户名"
            required
            :disabled="authStore.loading"
          />
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input
            id="password"
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            required
            :disabled="authStore.loading"
          />
        </div>
        
        <button 
          type="submit" 
          class="btn"
          :disabled="authStore.loading"
        >
          {{ authStore.loading ? '登录中...' : '登录' }}
        </button>
        
        <div v-if="authStore.error" class="error-message">
          {{ authStore.error }}
        </div>
      </form>
      
      <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px;">
        <h4 style="margin-bottom: 10px; color: #666;">测试账号</h4>
        <p style="color: #666; font-size: 14px;">
          用户名: <strong>admin</strong><br>
          密码: <strong>admin123</strong>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = reactive({
  username: '',
  password: ''
})

const handleLogin = async () => {
  const success = await authStore.login(form)
  if (success) {
    router.push('/dashboard')
  }
}
</script>
